<!-- 组件的名称应该是两个及以上单词的拼接，不然eslint校验就会报错 -->
<template>
  <div>
    <cp-nav-bar a="注册" />
    <div class="login">
      <div class="login-header">
        <div class="login-header-1">{{ isPassword ? '密码登录' : '短信验证码登录' }}</div>
        <div class="login-header-2" @click="isPassword = !isPassword">
          {{ isPassword ? '短信验证码登录' : '密码登录' }}<van-icon name="arrow" />
        </div>
      </div>
      <div class="login-form">
        <!-- 1. 先结构html  2.在写css  3.在js发请求等等 -->
        <van-form @submit="onSubmit" @failed="onFailed">
          <van-cell-group inset>
            <van-field
              v-model="mobile"
              name="mobile"
              clearable
              placeholder="请输入手机号"
              :rules="[
                { required: true, message: '请输入手机号' },
                { pattern, message: '手机号错误' }
              ]"
            />
            <van-field
              v-if="isPassword"
              v-model="password"
              type="password"
              name="password"
              placeholder="请输入密码"
              :rules="[
                { required: true, message: '请输入密码' },
                { pattern: /^\S{8,24}$/, message: '密码必须输入8-24位' }
              ]"
            >
              <template #button>
                <!-- icon在这里传递的参数是 文件夹名称 + 文件名称  不要后缀 -->
                <cp-icon @click="isOpen = !isOpen" :name="`login-eye-${isOpen ? 'on' : 'off'}`" />
                <!-- :name="isOpen ? 'login-eye-on' : 'login-eye-off'" -->
                <!-- <cp-icon name="home-find" />
                <cp-icon name="user-edit" /> -->
              </template>
            </van-field>
            <van-field
              v-else
              v-model="code"
              name="code"
              placeholder="请输入验证码"
              :rules="[
                { required: true, message: '请输入验证码' },
                { pattern: /^\d{6}$/, message: '验证码必须输入6位' }
              ]"
            >
              <template #button>
                <van-button :disabled="count > 0" size="small" type="primary" @click="getCode">{{
                  count <= 0 ? '发送验证码' : `${count}s后再次发送`
                }}</van-button>
              </template>
            </van-field>
            <van-checkbox v-model="checked" icon-size="16px">
              <span>我已同意</span>
              <span class="my-main-color">用户协议</span>
              <span style="margin: 0 5px">及</span>
              <span class="my-main-color">隐私协议</span>
            </van-checkbox>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button :disabled="!checked" round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <div>忘记密码?</div>
      <div class="login-bottom">
        <div>第三方登录</div>
        <div class="login-qq">
          <cp-icon name="login-qq" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LoginCom">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
// import 'vant/es/toast/style'
import { loginRequest, getCodeRequest, loginByCodeRequest } from '@/services/user'
import { userStore } from '@/stores'
// 导入插件
import useClipboard from 'vue-clipboard3'
// 使用插件
const { toClipboard } = useClipboard()

// 下面的字段，凡是要发请求的，都需要去看接口文档，字段和接口文档里面的保持一致
const mobile = ref('13230000003')
const password = ref('abc12345')
const code = ref('')
const checked = ref(false)
// 登录方式切换
const isPassword = ref(true)
// 倒计时的时间
const count = ref(0)
// 控制眼睛按钮关闭和打开
const isOpen = ref(false)

// 下面是store的导入，不用使用解构赋值，容易丢失响应式。storeToRef
const store = userStore()
// 获取路由跳转的路由实例对象
const router = useRouter()

// 正则有几个内置的内容  \d 数字 0-9   \w a-zA-Z0-9_  \s 空格制表符换行
// \D \W \S 取反
const pattern = /^1[356789]\d{9}$/

const onFailed = () => {
  // console.log('校验失败', errorInfo)
}
const onSubmit = async () => {
  // 调用接口发请求
  // const res = await loginRequest('/login/password', 'post', {})
  // 函数封装的含义，就是让我们的业务代码这边尽可能的简单一些，参数如果是常量，尽可能放到封装的函数里面去，业务代码一定要精简
  let res: any = null
  if (isPassword.value) {
    res = await loginRequest({
      mobile: mobile.value,
      password: password.value
    })
  } else {
    res = await loginByCodeRequest({
      mobile: mobile.value,
      code: code.value
    })
  }

  // 1.保存token等信息到 pinia里面
  store.setUser(res.data)
  // 2. 先给登录成功的提示
  showToast('登录成功')
  // 3. 跳转页面
  // this.$router.push('/xxxx')
  router.push('/user')
}

const getCode = async () => {
  count.value = 6
  let timerId: any = null
  timerId = setInterval(() => {
    count.value--
    if (count.value === 0) {
      clearInterval(timerId)
    }
  }, 1000)

  const res = await getCodeRequest({
    mobile: mobile.value,
    type: 'login'
  })
  // 将验证码复制一下
  // 1. pnpm i vue-clipboard3 搜索的包要是vue3
  toClipboard(res.data.code) // 这一步就相当于我们ctrl + c
}
</script>

<style lang="scss" scoped>
.login {
  padding: 15px;
  // .login-header
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    &-1 {
      font-size: 24px;
    }
    &-2 {
      font-size: 18px;
    }
  }
  &-form {
    .van-cell-group--inset {
      margin: 0;
    }
    // .van-cell {
    // padding-left: 0;
    // css变量
    // --van-cell-horizontal-padding
    // }
    .van-checkbox {
      // padding-left: var(--van-cell-horizontal-padding);
      padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
    }
  }
  &-bottom {
    margin-top: 100px;
    text-align: center;
    color: var(--cp-dark);
  }
}
.login-qq {
  font-size: 50px;
  margin-top: 15px;
}
</style>
